<template>
  <div class="content">
    <!-- 网络配置信息 -->
    <div class="line1">
      <h2>网络配置信息</h2>
      <el-card class="network-card" shadow="hover">
        <div class="detail-item">
          <span>eth0</span>
          <span class="ip">固定IP</span>
          <el-button type="primary" size="small" style="float: right">修改</el-button>
        </div>
        <div class="detail-item">
          <span>IP地址：10.0.4.16</span>
        </div>
        <div>
          <span>MAC地址：S254:00:66:9f:5b</span>
        </div>
      </el-card>
    </div>

    <div class="line2">
      <!-- CPU使用率 -->
      <div class="resource-card">
        <h2>CPU使用率</h2>
        <div class="resource-content">
          <div class="progress-circle">
            <el-progress
              type="circle"
              :percentage="2.3"
              :stroke-width="8"
              color="#2080f0"
              :width="120"
            >
              <template #default="{ percentage }">
                <span class="custom-text">{{ percentage }}%</span>
              </template>
            </el-progress>
          </div>
          <div class="usage-detail">2.3/100</div>
        </div>
      </div>
      <!-- 内存使用率 -->
      <div class="resource-card">
        <h2>内存使用率</h2>
        <div class="resource-content">
          <div class="progress-circle">
            <el-progress
              type="circle"
              :percentage="34"
              :stroke-width="8"
              color="#2080f0"
              :width="120"
            >
              <template #default="{ percentage }">
                <span class="custom-text">{{ percentage }}%</span>
              </template>
            </el-progress>
          </div>
          <div class="usage-detail">1250.53MB/3GB</div>
          <div class="usage-subdetail">657.66MB</div>
        </div>
      </div>
      <!-- 磁盘使用率 -->
      <div class="resource-card">
        <h2>磁盘使用率</h2>
        <div class="resource-content">
          <div class="progress-circle">
            <el-progress
              type="circle"
              :percentage="19"
              :stroke-width="8"
              color="#2080f0"
              :width="120"
            >
              <template #default="{ percentage }">
                <span class="custom-text">{{ percentage }}%</span>
              </template>
            </el-progress>
          </div>
          <div class="usage-detail">8326MB/43460MB</div>
        </div>
      </div>
    </div>

    <div class="line2">
      <!-- 变量数量 -->
      <div class="resource-card">
        <h2>变量数量</h2>
        <div class="resource-content">
          <div class="progress-circle">
            <el-progress
              type="circle"
              :percentage="5"
              :stroke-width="8"
              color="#2080f0"
              :width="120"
            >
              <template #default="{ percentage }">
                <span class="custom-text">{{ percentage }}%</span>
              </template>
            </el-progress>
          </div>
          <div class="usage-detail">5/1000</div>
        </div>
      </div>
      <!-- 变量连接失败 -->
      <div class="resource-card">
        <h2>变量连接失败</h2>
        <div class="resource-content">
          <div class="progress-circle">
            <el-progress
              type="circle"
              :percentage="0"
              :stroke-width="8"
              color="#2080f0"
              :width="120"
            >
              <template #default="{ percentage }">
                <span class="custom-text">{{ percentage }}%</span>
              </template>
            </el-progress>
          </div>
          <div class="usage-detail">0/0</div>
        </div>
      </div>
      <!-- 历史数量 -->
      <div class="resource-card">
        <h2>历史数量</h2>
        <div class="resource-content">
          <div class="progress-circle">
            <el-progress
              type="circle"
              :percentage="5"
              :stroke-width="8"
              color="#2080f0"
              :width="120"
            >
              <template #default="{ percentage }">
                <span class="custom-text">{{ percentage }}%</span>
              </template>
            </el-progress>
          </div>
          <div class="usage-detail">5/1000000</div>
        </div>
      </div>
      <!-- 报警数量 -->
      <div class="resource-card">
        <h2>报警数量</h2>
        <div class="resource-content">
          <div class="progress-circle">
            <el-progress
              type="circle"
              :percentage="5"
              :stroke-width="8"
              color="#2080f0"
              :width="120"
            >
              <template #default="{ percentage }">
                <span class="custom-text">{{ percentage }}%</span>
              </template>
            </el-progress>
          </div>
          <div class="usage-detail">5/1000000</div>
        </div>
      </div>
      <!-- 报警未读数 -->
      <div class="resource-card">
        <h2>报警未读数</h2>
        <div class="resource-content">
          <div class="progress-circle">
            <el-progress
              type="circle"
              :percentage="0"
              :stroke-width="8"
              color="#2080f0"
              :width="120"
            >
              <template #default="{ percentage }">
                <span class="custom-text">{{ percentage }}%</span>
              </template>
            </el-progress>
          </div>
          <div class="usage-detail">0/0</div>
        </div>
      </div>
      <!-- 设备数量 -->
      <div class="resource-card">
        <h2>设备数量</h2>
        <div class="resource-content">
          <div class="progress-circle">
            <el-progress
              type="circle"
              :percentage="5"
              :stroke-width="8"
              color="#2080f0"
              :width="120"
            >
              <template #default="{ percentage }">
                <span class="custom-text">{{ percentage }}%</span>
              </template>
            </el-progress>
          </div>
          <div class="usage-detail">5/100</div>
        </div>
      </div>
      <!-- 设备连接失败 -->
      <div class="resource-card">
        <h2>设备连接失败</h2>
        <div class="resource-content">
          <div class="progress-circle">
            <el-progress
              type="circle"
              :percentage="0"
              :stroke-width="8"
              color="#2080f0"
              :width="120"
            >
              <template #default="{ percentage }">
                <span class="custom-text">{{ percentage }}%</span>
              </template>
            </el-progress>
          </div>
          <div class="usage-detail">0/0</div>
        </div>
      </div>
    </div>

    <!-- 设备报警 -->
    <div class="line1">
      <h2>设备报警</h2>
      <el-empty description="当前无设备报警"></el-empty>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.content {
  width: 100%;
  height: 100%;
  font-size: 14px;
}
/* 网络配置卡片样式 */
.line1 {
  padding: 20px;
  margin-bottom: 10px;
  background-color: #ffffff;
}
h2 {
  margin-bottom: 10px;
}
.network-card {
  width: 300px;
}
.detail-item {
  margin-bottom: 10px;
}
.ip {
  background-color: #e3f3eb;
  color: #18a070;
  margin-left: 5px;
  padding: 5px;
}

/* 资源监控卡片样式 */
.line2 {
  display: flex;
  padding: 20px;
  margin-bottom: 10px;
  background-color: #ffffff;
}
.resource-card {
  height: 100%;
  margin-right: 30px;
  text-align: center;
}
.resource-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.el-progress {
  margin: 20px 10px;
}
.custom-text {
  font-size: 26px;
  font-weight: bold;
}

/* 响应式设计 */
</style>
